<template>
	<view class="content">
		<view class="apply-type" v-show="type == -1">
			<view class="apply-img">
				<image src="/static/member/err.png" mode="aspectFill"></image>
			</view>
			<view class="apply-tips">
				您的申请被驳回
			</view>
			<view class="apply-tips-text colora">
				理由：{{remark}}
			</view>
			<view class="apply-btn">
				<view class="btn" @click="restart" >
					重新申请
				</view>
			</view>
			
		</view>
		<view class="" v-show="type == -2">
			<view class="reservation-form mt1">
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						选择门店                           
					</view>
					<view class="reservation-form-li-right" @click="openStore">
						<input placeholder-style="color:#c3c3c3" v-model="store.title" disabled="" class="uni-input" name="input" placeholder="请选择门店" />
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						公司名称                           
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.name" class="uni-input" name="input" placeholder="请输入公司名称" />
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						公司成立日期                      
					</view>
					<view class="reservation-form-li-right">
						<picker mode="date" :value="data.birthday"  @change="bindDateChangeBirthday">
			                <view class="uni-input">{{data.birthday}}</view>
			            </picker>
					</view>
				</view>
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						公司注册资本                       
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.capital" class="uni-input" name="input" placeholder="请输入公司注册资本" />
					</view>
				</view>		
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						股东的姓名                                  
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.shareholder_name" class="uni-input" name="input" placeholder="请输入股东的姓名" />
					</view>
				</view>		
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						股东住所                                      
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.shareholder_addr"  class="uni-input" name="input" placeholder="请输入股东住所" />
					</view>
				</view>		
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						缴纳的出资额                               
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.share_amount" class="uni-input" name="input" placeholder="请输入缴纳的出资额 " />
					</view>
				</view>		
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						出资日期                                      
					</view>
					<view class="reservation-form-li-right">
						<picker mode="date" :value="data.share_date"  @change="bindDateChange">
			                <view class="uni-input">{{data.share_date}}</view>
			            </picker>
					</view>
				</view>		
				<view class="reservation-form-li flex po">
					<view class="reservation-form-li-left">
						出资证明书编号                                           
					</view>
					<view class="reservation-form-li-right">
						<input placeholder-style="color:#c3c3c3" v-model="data.no" class="uni-input" name="input" placeholder="请输入出资证明书编号" />
					</view>
				</view>					 
			</view>
			<view class="mt1">
				<view class="approve ">
					<text class="">
						出资报告/协议书
					</text>
					<view class="approve-list flex">
						<view class="approve-btn"  @click="openChooseImage('share_report')">
							<image :src="data.share_report ? data.share_report : '/static/p03.png'" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="mt1">
				<view class="approve ">
					<text class="">
						股权证明
					</text>
					<view class="approve-list flex">
						<view class="approve-btn" @click="openChooseImage('front')">
							<image :src="data.front ? data.front : '/static/p03.png'" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view> -->
			<view class="mt1">
				<view class="approve ">
					<text class="">
						申请公函
					</text>
					<view class="approve-list flex">
						<view class="approve-btn" @click="openChooseImage('share_letter')">
							<image :src="data.share_letter ? data.share_letter : '/static/p03.png'" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="foot" @click="post">
				确认提交
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
        mapState,
        mapMutations
    } from 'vuex'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				data: {
					"share_date": currentDate,
					"birthday":currentDate,
					"share_report": "",
					"front": "",
					"share_letter": "",
				},
				store: {
					"title":"",
					"member_id":""
				},
				type: 0,
				remark: ''
			}
		},
		computed: {
			...mapState(['token','storeData']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {
			if(option.type){
				this.type = option.type
				option.remark ? this.remark = option.remark : ''
			}
		},
		onShow() {
			//console.log(JSON.stringify(this.storeData) == "{}")
			if(JSON.stringify(this.storeData) != "{}"){
				this.store = this.storeData
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.data.share_date = e.target.value
			},
			bindDateChangeBirthday: function(e) {
				this.data.birthday = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			...mapMutations(['getNetworkType','vuexRequest','vuexUploadFile']),
			Upload(path,type) {
				uni.showLoading({
					title: '上传中'
				});
				this.vuexUploadFile({
					url: '/api/v2/file/images?access-token=' + this.token,
					name: 'file',
					filePath: path,
					formData: {},
					success: (res)  => {		
						uni.hideLoading()
						this.data[type] = res.data.data.url
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							position:'bottom'
						})
					},
					fail: (err)  => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
					},
				})
			},
			openChooseImage(type) {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success:  (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						this.Upload(res.tempFilePaths[0],type)
					}
				});
			},
			post() {
				this.data.type = 3
				if(!this.store.member_id ){
					uni.showToast({
						title: "请选择门店",
						icon: 'none',
						position:'bottom'
					})
					return !1
				}
				if(!this.data.no){
					uni.showToast({
						title: "请输入出资证明书编号",
						icon: 'none',
						position:'bottom'
					})
					return !1
				}
				if(!this.data.share_report){
					uni.showToast({
						title: "请上传出资报告/协议书",
						icon: 'none',
						position:'bottom'
					})
					return !1
				}
				// if(!this.data.front){
				// 	uni.showToast({
				// 		title: "请上传股权证明",
				// 		icon: 'none',
				// 		position:'bottom'
				// 	})
				// 	return !1
				// }
				if(!this.data.share_letter){
					uni.showToast({
						title: "请上传申请公函",
						icon: 'none',
						position:'bottom'
					})
					return !1
				}
				this.data.store_id = this.store.member_id
				this.vuexRequest({
					url: '/api/addons/execute?route=member-id/create&addon=o-s-mall-dist&access-token=' + this.token,
					method: 'POST',
					data: this.data,
					success: (res)  => {
						uni.showToast({
							icon: 'none',
							title: '提交成功，请等待审核',
							position:'bottom'
						})
						uni.navigateBack()
					},
					fail: (err)  => {
						uni.showToast({
							icon: 'none',
							title: err.data.message,
							position:'bottom'
						})
					},
				})
			},
			openStore() {
				uni.navigateTo({
					url: '/pages/member/certification/shareholder-store-list/shareholder-store-list'
				});
			},
			restart() {
				this.type = -2
			}
		},
		watch: {
			storeData() {
				// 监听token登录状态请求会员信息
				if(JSON.stringify(this.storeData) != "{}"){
					this.store = this.storeData
				}
			}
		}
	}
</script>

<style>
	.mt1{
		margin: 20upx 0 0 0;
	}
	.flex{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.approve{
		background: #FFFFFF;
		margin: 0 ;
		padding: 20upx 30upx;
	}
	.colorc{
		color: #b0b0b0;
	}
	.approve-list{
		padding: 20upx 0upx;
	}
	.approve-btn{
		width: 424upx;
		height: 299upx;
		margin: 0 auto;
	}
	.approve-btn image{
		width: 424upx;
		height: 299upx;
	}
	.po{
		position: relative;
	}
	.po:after{
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.uni-input{
		margin: 0;
	}
	.reservation-form-li{
		background: #FFFFFF;
		padding: 10upx 30upx;
	}
	.reservation-form-li-right{
		width: 70%;
	}
	.foot{
		color: #FFFFFF;
		width: 80%;
		margin: 80upx auto 0 auto;
		height: 100upx;
		background: #f54336;
		text-align: center;
		line-height: 100upx;
		z-index: 20;
		border-radius: 100upx;
	}
	
	.apply-img{
		text-align: center;
	}
	.apply-img image{
		width: 200upx;
		height: 200upx;
	}
	.apply-type{
		background: #FFFFFF;
		padding: 40upx;
	}
	.apply-tips{
		text-align: center;
		font-size: 34upx;
		padding: 20upx 0 0 0;
	}
	.apply-tips-text{
		text-align: center;
		color: #a7a7a7;
		font-size: 20upx;
		padding: 0 80upx;
	}
	.apply-btn{
		width: 90%;
		margin: 0 auto;
	}
	.apply-btn .btn{
		color: #FFFFFF;
		width: 100%;
		height: 100upx;
		background: #f54336;
		text-align: center;
		line-height: 100upx;
		z-index: 20;
		border-radius: 100upx;
		margin: 60upx 0;
	}
	.apply-code{
		text-align: center;
		padding: 10upx 0;
	}
	.apply-code text{
		color: #f54336;
	}
	
	.approve{
		background: #FFFFFF;
		margin: 0 ;
		padding: 20upx 30upx;
	}
	.approve-list{
		padding: 20upx 0upx;
	}
	.approve-btn{
		width: 424upx;
		height: 299upx;
		margin: 0 auto;
	}
	.approve-btn image{
		width: 424upx;
		height: 299upx;
	}
</style>
